<template>
  <tm-app color="#F5F3EF">
    <Navbar hideMode />
    <view class="content">
      <view class="info" :class="{ 'isVip': isVip }">
        <tm-avatar linear="top" :size="112" :round="26" :font-size="26" :label="userInfo?.name || ''"></tm-avatar>
        <view class="ml-28">
          <tm-text :font-size="40" _class="text-weight-b" color="#444444" :label="userInfo?.name || ''"></tm-text>
          <tm-text :font-size="24" color="#444444" :label="phone"></tm-text>
          <tm-text v-if="isVip" :font-size="28" color="#444444" :label="`超级会员至 ${memberEcpiredDate}过期`"></tm-text>
        </view>

        <!-- <view class="openVip" @click="navigateTo(pageLink.vipDetail)">续费</view> -->
      </view>
      <view v-if="!isVip" class="vip">
        <tm-text :font-size="36" color="#FACEAE" label="超级会员"></tm-text>
        <view @click="navigateTo(pageLink.vipActivated)" class="btn"></view>
      </view>
      <view class="func">
        <view class="func-info" @click="navigateTo(pageLink.updateInfo)">
          <tm-text :font-size="32" color="#444444" label="个人档案"></tm-text>
        </view>
        <!-- <view class="func-terminal">
          <tm-text :font-size="32" color="#444444" label="设备管理"></tm-text>
        </view> -->
      </view>
      <view class="round-4 overflow mb-40">
        <!-- <tm-cell :margin="[0, 0]" :titleFontSize="32" title="联系客服"> </tm-cell> -->
        <tm-cell :margin="[0, 0]" :url="pageLink.protocolUser" :titleFontSize="32" title="用户协议"> </tm-cell>
        <tm-cell :margin="[0, 0]" :url="pageLink.privacy" :titleFontSize="32" title="隐私协议"> </tm-cell>
        <tm-cell :margin="[0, 0]" :url="pageLink.about" :titleFontSize="32" title="关于我们"> </tm-cell>
        <tm-cell @click="handleUserDestory" :margin="[0, 0]" :titleFontSize="32" title="注销账号"> </tm-cell>
      </view>
      <tm-button @click="handleLogout" color="#fff" :height="96" size="middle" fontColor="#F06340" block
        label="退出登录"></tm-button>
    </view>

    <tm-modal :btnRound="6" ref="modal" color="white" okColor="#A37C3D" cancelColor="#A37C3D" okLinear="left" splitBtn
      title="提示" content="此操作会删除并清空你的所有数据，确认是否注销?"></tm-modal>
    <Tabbar />
  </tm-app>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import Navbar from '@/components/navbar/index.vue';
import { useUserStore } from "/stores/user.ts";
import { pageLink } from '/constants/link.ts'
import { navigateTo } from '/utils/index.ts'
import Tabbar from '@/components/tabbar/index.vue'
import { storeToRefs } from 'pinia'

const userStore = useUserStore();

const modal = ref(null)

const { phone = '', memberEcpiredDate = '', userInfo = {} } = storeToRefs(userStore)

const isVip = computed(() => {
  return userStore?.isActivateMember
});

const handleLogout = () => {
  userStore.logout();
}

const handleUserDestory = async () => {
  modal.value
    ?.open()
    ?.then(() => {
      userStore.destroy();
    })
}
</script>

<style lang="less" scoped>
.app {}

.content {
  padding: 0 26rpx;
  background-image: url('/static/assets/images/my/bg.png');
  background-size: 100% auto;
  background-position: 0 -20%;
  background-repeat: no-repeat;

  .info {
    padding: 40rpx 0;
    display: flex;
    align-items: center;
    position: relative;

    .openVip {
      background: linear-gradient(to right, #BF8B38, #EFAC40);
      color: #fff;
      padding: 6rpx 20rpx;
      border-top-left-radius: 30rpx;
      border-bottom-left-radius: 30rpx;
      font-size: 28rpx;
      position: absolute;
      right: -26rpx;
      bottom: 36rpx;
    }

    &.isVip {
      align-items: top;
    }
  }

  .vip {
    padding: 30rpx 20rpx 30rpx 40rpx;
    background-image: url('/static/assets/images/my/vip-bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 28rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn {
      width: 112rpx;
      height: 40rpx;
      background-image: url('/static/assets/images/my/btn.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }

  .func {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    &-info {
      width: 100%;
      height: 120rpx;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 0.8);
      background-image: url('/static/assets/images/my/info-bg.png');
      background-size: auto 80rpx;
      background-position: 10rpx 20rpx;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      padding-left: 160rpx;
    }

    &-terminal {
      width: 340rpx;
      height: 120rpx;
      background-image: url('/static/assets/images/my/terminal-bg.png');
      background-size: 100% auto;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      padding-left: 160rpx;
    }
  }
}
</style>
